import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { RouterProvider, createHashRouter } from "react-router-dom";
import Error404 from "./views/404.jsx";
import List from "./views/list.jsx";
import About from "./views/about.jsx";
import Home from "./views/home.jsx";
import Detail from "./views/detail.jsx";
import User from "./views/User.jsx";

const router = createHashRouter([
  {
    path: "/",
    element: <App></App>,
    errorElement: <Error404></Error404>,
    children: [
      {
        // path:'/'
        index: true,
        element: <Home></Home>,
      },
      {
        path: "/list",
        element: <List></List>,
        children: [
          {
            path: "/list/:id",
            element: <Detail></Detail>,
          },
        ],
      },
      {
        path: "/user",
        element: <User></User>,
      },
      {
        path: "/about",
        element: <About></About>,
      },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <RouterProvider router={router}>
    <App />
  </RouterProvider>
);
